<template>
  <div class="edit-container">
    <div class="header">
      <h1>编辑</h1>
    </div>

    <div class="form-section">
      <div class="form-item">
        <label for="game">会玩的游戏:</label>
        <el-input type="text" v-model="gameName" placeholder="请输入游戏名称"/>
      </div>

      <div class="form-item">
        <label for="nickname">游戏昵称:</label>
        <el-input type="text" v-model="gameNickname" placeholder="请输入游戏昵称"/>
      </div>

      <div class="form-item">
        <label for="position">擅长位置:</label>
        <el-input type="text" v-model="position" placeholder="请输入擅长位置"/>
      </div>

      <div class="form-item">
        <label for="role">擅长角色:</label>
        <el-input type="text" v-model="characterRole" placeholder="请输入擅长角色"/>
      </div>

      <div class="form-item">
        <label for="price">价格时长:</label>
        <el-input type="text" v-model="price" placeholder="元/小时"/>
      </div>

      <div class="form-item">
        <label for="phone">联系电话:</label>
        <el-input type="text" v-model="contact" placeholder="请输入联系电话"/>
      </div>

      <div class="form-item">
        <label for="image">技术水平证明截图:</label>
        <div class="upload-box" @click="uploadImage">
          <span>+</span>
          <p>上传游戏截图</p>
        </div>
      </div>

      <textarea v-model="description" placeholder="文字介绍（请简要说明技能、技术等，不超过50字）"></textarea>
    </div>

    <div class="button-group">
      <button class="cancel-button" @click="cancel">取消</button>
      <button class="confirm-button" @click="confirm">确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gameName: '王者荣耀',
      gameNickname: '老牛想吃嫩草',
      position: '对战路 中路 发育路 游走 拔野',
      characterRole: '云芮 甄姬 明世隐',
      price: '50元/小时',
      contact: '13388995566',
      description: '简介信息：技能、技术等不超过50字',
    };
  },
  methods: {
    uploadImage() {
      // 上传图片的逻辑
      console.log("上传技术水平截图");
    },
    cancel() {
      // 处理取消逻辑
      console.log("取消编辑");
    },
    confirm() {
      // 确认编辑的逻辑
      console.log("确认编辑信息");
    },
  },
};
</script>

<style scoped>
.edit-container {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  max-width: 500px;
  margin: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 24px;
  color: #333;
}

.form-section {
  margin-bottom: 20px;
}

.form-item {
  margin: 15px 0;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
}

textarea {
  width: 100%;
  height: 80px;
  padding: 10px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  margin-top: 10px;
}

.upload-box {
  border: 2px dashed #00aaff;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  color: #00aaff;
  display: inline-block;
}

.upload-box span {
  font-size: 50px;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.cancel-button,
.confirm-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.cancel-button {
  background-color: #eaeaea;
  color: #333;
}

.confirm-button {
  background-color: #00aaff;
  color: white;
}
</style>
